<!-- 继承模板 -->
{% extends 'layout/base_page.html' %}

<!-- 加载静态文件-->
{% load static %}

<!--- Title -->
{% block title %}
    用户登陆
{% endblock %}


<!--- CSS -->
{% block css %}
    <style>
        body {
            background-image: url("/static/images/login_bg.jpg");
            background-size: cover;
        }

        .outer {
            width: 420px;
            height: 400px;
            background-color: whitesmoke;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 20px;
            box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
            padding: 40px 30px;
        }

        .title {
            width: 100%;
            text-align: center;
            font-size: 30px;
            color: navy;
        }

        .layui-form-item {
            margin-bottom: 25px;
        }
    </style>
{% endblock %}


<!--- Content -->
{% block content %}
    <!-- 内容01：容器-->
    <div class="outer">
        <!--标题-->
        <div class="title">用 户 登 陆</div>
        <hr style="margin: 40px 0">
        <!-- 登陆的表单 -->
        <form id="loginForm" class="layui-form" lay-filter="loginForm"  >
            {% csrf_token %}
            <div class="layui-form-item">
                <label class="layui-form-label" for="loginid"><b>登陆账号：</b></label>
                <div class="layui-input-block">
                    <input type="text" id="loginid" name="loginid" class="layui-input" placeholder="登陆账号/手机号码/邮箱">
                    <span class="error_msg" style="position: absolute; color: red"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="loginpwd"><b>登陆密码：</b></label>
                <div class="layui-input-block">
                    <input type="password" id="loginpwd" name="loginpwd" class="layui-input" placeholder="登陆密码">
                    <span class="error_msg" style="position: absolute; color: red"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><b>滑块验证：</b></label>
                <div class="layui-input-block">
                    <div id="slider"></div>
                    <span class="error_msg" style="position: absolute; color: red"></span>
                </div>
            </div>
            <div class="layui-form-item" style="margin-left: 30px;">
                <input type="checkbox" id="rememberme" name="rememberme" title="记住我" checked>
            </div>
            <div class="layui-form-item" style="float: right; margin-top:10px;">
                <a href="" style="margin-right: 170px; color:lightblue">忘记密码？</a>
                <button type="submit" class="layui-btn">登陆</button>
                <button type="button" class="layui-btn layui-btn-primary">取消</button>
            </div>

        </form>
    </div>


{% endblock %}


<!--- JS -->
{% block js %}
    <script>

        $(function () {
            // ===页面初始化===
            initPage();
            // ===验证滑块的初始化===
            initSlider();

        });

        // ============== 页面初始化的实现 ============
        function initPage() {
            layui.use(['element', 'form'], function () {
                let element = layui.element;
                let form = layui.form;
            })
        }

        // ============== 验证滑块初始化的实现 ==========
        function initSlider() {
            layui.config({
                base: "{% static 'plugin/layui_exts/sliderVerify/' %}"
            }).use(['sliderVerify', 'form'], function () {
                let sliderVerify = layui.sliderVerify;
                let form = layui.form;

                let slider = sliderVerify.render({
                    elem: '#slider',
                });


                // ============= 提交 ==============
                form.on('submit(loginForm)', function (data) {
                    // 清除之前所有的错误提示
                    $('.error_msg').empty();
                    //判断是否有滑动滑块
                    if(slider.isOk()){
                        // 判断用户名和密码是否为空
                        if($('#loginid').val().length === 0){
                            $('#loginid').next().html('登陆账号不能为空！');
                            slider.reset();
                            return false;
                        }
                         if($('#loginpwd').val().length === 0){
                            $('#loginpwd').next().html('密码不能为空！');
                            slider.reset();
                            return false;
                        }
                        // 使用Ajax验证
                        $.ajax({
                            url: "/user/"
                            , method: 'post'
                            , data: $('#loginForm').serialize()
                            , dataType: 'json'
                            , success: function (res) {
                                console.log(res);
                                // 根据返回结果展示错误
                                if(res.code === 1){
                                    layer.msg("身份验证成功！");

                                    localStorage.setItem('token', res.token);

                                } else if (res.code === 0){
                                     $('#loginid').next().html(res.error);
                                     slider.reset();
                                } else if(res.code === 2){
                                     $('#loginid').next().html(res.error);
                                     slider.reset();
                                }  else if(res.code === 3){
                                     $('#loginpwd').next().html(res.error);
                                     slider.reset();
                                } else if(res.code === 4){
                                     layui.layer.msg(res.error);
                                     slider.reset();
                                }
                            }
                        })

                    } else {
                        layui.layer.msg("请先拖动滑块验证！")
                    }

                   return false
                })

            })
        }
    </script>

{% endblock %}